<template>
  <view class="mask mask-show u_loading" v-if="loadingShow" @touchmove.stop.prevent="preventTouchMove">
    <!-- 加载动画开始 -->
    <view class="preloader">
      <view class="loader">
        <view></view>
        <view></view>
        <view></view>
        <view></view>
        <view></view>
      </view>
    </view>
    <!-- 加载动画结束 -->
    <!-- <view class="title">/view> -->
  </view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
export default {
  computed: {
    ...mapState(['loadingShow'])
  },
  methods: {
    preventTouchMove() {
      console.log('stop user scroll it!');
      return;
    }
  }
};
</script>

<style lang="scss" scoped>
.u_loading {
  &.mask {
    /* pointer-events: none; */
    position: fixed;
    z-index: 99999;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100vh;
    width: 100vw;
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
  }

  &.mask-show {
    background: rgba(255, 255, 255, 0.8);
  }

  .title {
    color: #000;
    font-size: 28rpx;
    margin-top: 40rpx;
    font-weight: bold;
  }

  .loader {
    width: 110px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .loader view {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: #1d1d1d;
  }
   .loader view:nth-child(1) {
    animation: pulse .4s ease 0s infinite alternate;
  }
  .loader view:nth-child(2) {
    animation: pulse .4s ease 0.2s infinite alternate;
  }

  .loader view:nth-child(3) {
    animation: pulse .4s ease 0.4s infinite alternate;
  }

  .loader view:nth-child(4) {
    animation: pulse .4s ease 0.6s infinite alternate;
  }

  .loader view:nth-child(5) {
    animation: pulse .4s ease 0.8s infinite alternate;
  }

 @keyframes pulse {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: .25;
    transform: scale(.75);
  }
}

}
</style>
